<template>

	<b-layout-index :style="{ '--colorPrimary': color.primary }">
		<navbar color="#fff" :bgcolor="color.primary" :title="$t('实名认证')" isStyle="light"></navbar>



		<view class="content font-size-12">
			<view class="upload-section">
				<view class="upload-card" @click="goOcr">
					<view class="upload-area" :style="{'backgroundImage':'url('+baseImgUrl+')'}">

						<iconfont icon="icon-icon-test3" size="30" :color="color.primary" />
						<text class="upload-text">{{$t('身份证人像面')}}</text>

					</view>
					<text class="upload-tip">{{$t('您的认证照片仅用于平台实名认证')}}</text>
				</view>

			</view>

			<view class="form-section">
				<view class="input-group">
					<text class="label">{{$t('真实姓名')}}</text>
					<input class="input" v-model="param.name" type="text" :placeholder="$t('请输入真实姓名')"
						placeholder-class="placeholder" />
				</view>
				<view class="input-group">
					<text class="label">{{$t('身份证号码')}}</text>
					<input class="input" v-model="param.idcard" type="idcard" :placeholder="$t('请输入身份证号码')"
						placeholder-class="placeholder" />
				</view>
				<view class="input-group" v-if="!userInfo.phone">
					<text class="label">{{$t('手机号')}}</text>
					<input class="input" v-model="param.phone" type="phone" :placeholder="$t('请输入手机号')"
						placeholder-class="placeholder" />
				</view>
			</view>
		</view>

		<view class="footer">
			<button class="submit-btn" @click="goEdit" type="primary">{{$t('提交认证')}}</button>
		</view>

		</view>
	</b-layout-index>

</template>

<script>
	import {
		login,
		loginAccount,
		byPhone,
		byIdCard,
		regesterLogin,
		refreshLogin
	} from '@/api/oauth.js'
	import {
		getAuthInfo,
		myEdit,
		changeAvatar
	} from '@/api/user.js'

	export default {

		data() {
			var userInfo = uni.getStorageSync("userInfo")
			console.log(userInfo)
			return {
				userInfo: userInfo,
				authInfo: {
					id: 0
				},
				baseImgUrl: "",
				param: {
					idcard: "",
					name: "",
					phone: userInfo.phone

				},

			}
		},
		onLoad: function({
			type = 12,
			userId = 0
		}) {
			uni.removeStorageSync("authInfo")

			this.getAuthInfo()

		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一

		},
		methods: {
			getAuthInfo: function(userId = 0) {
				var the = this;
				getAuthInfo().then(res => {
					the.authInfo = res;
					the.param = res;
				})
			},
			goEdit: function(e) {
				var the = this
				var param = this.param;
				console.log("Login")
				//	this.$refs.form1.setRules(this.rules);
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				//prevPage.$vm.detailList.receive = item; //修改上一页data里面的地址
				console.log("pages", nowPage, prevPage)
				if(param!=null){
				the.validate().then(res => {
					//	uni.$u.toast('校验通过')
					var a = myEdit(param)
					a.then(res => {

						uni.$u.toast('提交成功')
						var a = refreshLogin()
						a.then(res => {
							//uni.removeStorageSync("parentUserId")
							uni.setStorageSync("userInfo", res)
							uni.setStorageSync("Authorization", res.token)
							uni.reLaunch({
								url: "/pages/index/user"
							})
						})

					})


				}).catch(errors => {
					console.log(errors)
					uni.$u.toast(errors)
				})
				}else{
							uni.$u.toast("手机号不能为空")
				}

			},
			loginSubmitAccond: function() {
				var the = this;
				var param = this.param;
				param['parentUserId'] = this.authInfo.id
				this.$refs.form1.validate().then(res => {
					uni.$u.toast('校验通过')
					console.log(param)

				}).catch(errors => {
					console.log(errors)
					uni.$u.toast('校验失败')
				})
			},
			chooseAvatar: function(e) {
				const {

					avatarUrl

				} = e.detail
				console.log(avatarUrl)
				var the = this;
				changeAvatar(avatarUrl).then(res => {
					console.log(res)
					the.userInfo.avatar = res.url
					uni.setStorageSync("userInfo", the.userInfo)
				})
			},
			goOcr: function() {
				var the = this;

				// 选择图片
				wx.chooseImage({
					count: 1,
					success: async function(res) {
						try {
							uni.showLoading({
								title: the.$t("加载中")
							})
							console.log(res)
							the.baseImgUrl = res.tempFilePaths[0]
							const invokeRes = await wx.serviceMarket.invokeService({
								service: 'wx79ac3de8be320b71',
								api: 'OcrAllInOne',
								data: {
									// 用 CDN 方法标记要上传并转换成 HTTP URL 的文件
									img_url: new wx.serviceMarket.CDN({
										type: 'filePath',
										filePath: res.tempFilePaths[0],
									}),
									data_type: 3,
									ocr_type: 1
								},
							})
							var param = {}
							var item = invokeRes.data.idcard_res;
							param['idcard'] = item.id.text;
							param['name'] = item.name.text;
							param['address'] = item.address.text;
							param['nationality'] = item.nationality.text;
							param['gender'] = item.gender.text;
							the.param = param;
							console.log('invokeService success', invokeRes.data.idcard_res)
							/* 	wx.showModal({
									title: 'success',
									content: JSON.stringify(invokeRes),
								}) */
							uni.hideLoading();
						} catch (err) {
							console.error('invokeService fail', err)
							uni.showModal({
								title: 'fail',
								content: err,
							})
						}
					},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			validate: function() {
				var param = this.param;
				var the = this;
				return new Promise((resolve, reject) => {
					if (param.name.length > 0) {
						if (param.idcard.length > 0) {
							resolve(param)
						} else {
							reject(the.$t("身份证号不能为空"))
							//	uni.$u.toast(the.$t("身份证号不能为空"))
						}
					} else {
						reject(the.$t("姓名不能为空"))
						//	uni.$u.toast(the.$t("姓名不能为空"))
					}

				})
			}
		}
	}

	var validatePass = (rule, value, callback) => {
		if (value === '') {
			callback(new Error('请输入密码'));
		} else {
			callback();
		}
	};
	var validatePass2 = (rule, value, callback) => {
		if (value === '') {
			callback(new Error('请再次输入密码'));
		} else if (value !== this.model2.password) {
			callback(new Error('两次输入密码不一致!'));
		} else {
			callback();
		}
	};
</script>

<style>
	.text-indent {
		text-indent: 10px;
	}

	page {
		height: 100%;
		background-color: #F5F5F5;
	}

	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.header {
		display: flex;
		align-items: center;
		height: 88rpx;
		padding: 0 32rpx;
		background-color: #FFFFFF;
	}

	.back-icon {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}


	.content {
		flex: 1;
		padding: 32rpx;
	}

	.upload-section {
		margin-bottom: 32rpx;
	}

	.upload-card {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
	}

	.upload-area {
		height: 320rpx;
		background-color: #F8F8F8;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 16rpx;
		background-size: 100% 100%;
	}

	.camera-icon {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 16rpx;
	}

	.upload-text {

		color: #666666;
	}

	.upload-tip {
		font-size: 12px;
		color: #999999;
		text-align: center;
	}

	.form-section {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 32rpx;
	}

	.input-group {
		margin-bottom: 24rpx;
	}

	.input-group:last-child {
		margin-bottom: 0;
	}

	.label {
		display: block;

		color: #333333;
		margin-bottom: 16rpx;
	}

	.input {
		height: 88rpx;
		background-color: #F8F8F8;
		border-radius: 8rpx;
		padding: 0 24rpx;

		color: #333333;
	}

	.placeholder {
		color: #999999;
	}

	.footer {
		padding: 32rpx;
	}

	.submit-btn {
		background-color: var(--color-primary) !important;
		border-radius: 44rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 12px;
		color: #FFFFFF;
		margin: 0;
	}
</style>